<template>
  <div class="login">
    <div class="login-coninater">
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
        <h3 class="title">用户注册</h3>
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入用户名">
            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="请输入密码" @keyup.enter.native="handleLogin">
            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item prop="passwordagain">
          <el-input v-model="loginForm.passwordagain" type="password" auto-complete="off" placeholder="请确认你的密码" @keyup.enter.native="handleLogin">
            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> -->
        <el-form-item style="width:100%;">
          <el-button class="login-btn" :loading="loading" size="medium" @click.native.prevent="handleLogin()">
            <span v-if="!loading">立即注册</span>
            <span v-else>注 册 中...</span>
          </el-button>
        </el-form-item>
      </el-form>
      <div class="problem">
        <div class="problem-title">已有账号？</div>
        <router-link :to="{ path: '/dianShangLogin' }"><span class="aui-ll-link">立即登录</span></router-link>
      </div>
    </div>
  </div>
  <!--  底部  -->
  <!-- <div class="el-login-footer">
      <span>Copyright © 2019-2023 ReCheng All Rights Reserved.</span>
    </div> -->
  </div>
</template>

<script>


export default {
  name: "commerceHomePage",
  data() {
    return {
      codeUrl: "",
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
        passwordagain: "",
        uuid: ""
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" }
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" }
        ],
        passwordagain: [
          { required: true, validator: this.validUsername, trigger: "blur" }
        ],

      },
      loading: false,
      redirect: undefined
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created() {

  },
  methods: {
    validUsername(rule, value, callback) {
      if (value == '') {
        callback('请确认入确认密码');
      } else if (value != this.loginForm.password) {
        callback("两次密码不一致，请重新输入")
      } else {
        callback();
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store.dispatch("userRegister", this.loginForm).then(res => {
            this.$alert("<font color='red'>注册成功！</font>", '系统提示', {
              dangerouslyUseHTMLString: true,
              type: 'success'
            }).then(() => {
              this.$router.push({ path: '/' }).catch(() => { });
            }).catch(() => { });
          }).catch(() => {
            this.loading = false;
          })
        }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 499px);
    background-color: #e85351;
  }
  .login-coninater {
    padding: 20px;
    display: flex;
    background-color: #fff;
    height: auto;
    .login-btn {
      width: 100%;
      background-color: #e85351;
      color: #ffffff;
    }
    .problem {
      padding: 0 44px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 12px;
      .problem-title {
        color: #707070;
      }
      .aui-ll-link {
        margin: 8px 0;
        display: inline-block;
        // height: 22px;
        color: #fc4349;
        padding-right: 16px;
        background: url('../../assets/images/icon-row.png') right center no-repeat;
        background-size: 14px;

        cursor: pointer;
      }
    }
  }
  .title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
  }

  .login-form {
    width: 400px;
    padding: 25px 25px 5px 25px;
    border-right: 1px dashed #cccccc;
    .el-input {
      height: 38px;
      input {
        height: 38px;
      }
    }
    .input-icon {
      height: 39px;
      width: 14px;
      margin-left: 2px;
    }
  }
  .login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }

  .el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }
  .login-code-img {
    height: 38px;
  }
</style>
